<template>
  <div>
    <my-layout :menu_key="'4'">
      <el-input v-model="search" placeholder="请输入搜索内容" clearable prefix-icon="el-icon-search" style="width: 200px;"
                @change="get_task_list"></el-input>
      <el-button type="primary" @click="get_task_list">刷新数据</el-button>
      <el-table
          class="tables"
          :data="task_list"
          style="width: 100%">
        <el-table-column
            label="项目名称"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.project_info.project_name }}</p>
          </template>
        </el-table-column>
        <el-table-column
            prop="status"
            label="状态"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status==='已完成'"
                    type="success"
                    effect="dark">
              已完成
            </el-tag>
            <el-tag v-if="scope.row.status==='运行中'"
                    type=""
                    effect="dark">
              运行中
            </el-tag>
            <el-tag v-if="scope.row.status==='待运行'"
                    type="warning"
                    effect="dark">
              待运行
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
            prop="type"
            label="构建类型">
        </el-table-column>
        <el-table-column
            label="进度">
          <template slot-scope="scope">
            <el-progress :percentage="scope.row.progress_of" :color="colors"></el-progress>
          </template>
        </el-table-column>
        <el-table-column
            prop="build_time"
            label="耗时">
        </el-table-column>
        <el-table-column
            prop="version"
            label="构建版本">
        </el-table-column>
        <el-table-column
            label="查看日志">
          <template slot-scope="scope">
            <el-button type="text" @click="open_log(scope.row)">查看日志</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          layout="prev, pager, next"
          :total="count"
          @current-change="set_page">
      </el-pagination>
      <el-dialog
          title="日志"
          :visible.sync="dialogVisible"
          width="50%"
          :before-close="handleClose">
        <span style="white-space: pre-wrap;">{{ task_log }}</span>
        <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
      </el-dialog>
    </my-layout>
  </div>
</template>

<script>
import MyLayout from "@/components/MyLayout";
import {WxTaskList} from "@/request/api";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Task",
  components: {
    MyLayout
  },
  created() {
    this.get_task_list();
  },
  data() {
    return {
      page: 1,
      size: 10,
      search: "",
      task_list: [],
      count: 0,
      dialogVisible: false,
      task_log: "",
      colors: [
        {color: '#f56c6c', percentage: 25},
        {color: '#e6a23c', percentage: 50},
        {color: '#1989fa', percentage: 75},
        {color: '#5cb87a', percentage: 100}
      ]
    }
  },
  methods: {

    handleClose() {
      this.dialogVisible = false;
    },
    open_log(row) {
      this.task_log = row.log;
      this.dialogVisible = true;
    },
    get_task_list() {
      let data = {
        page: this.page,
        size: this.size,
        search: this.search
      }
      WxTaskList(data).then(res => {
        if (res.code === 200) {
          this.task_list = res.data.list;
          this.count = res.data.count;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    set_page(page) {
      this.page = page
      this.get_task_list();
    }
  }
}
</script>

<style scoped>
.tables {
  margin-top: 20px;
}
</style>
